<template>
  <div class="activity-details">
    <div class="activity-details-top">
      <div class="activity-details-top-content">
        <img :src="activityDetail.img_url" class="activity-img">
        <div class="activity-name">{{activityDetail.name}}</div>
      </div>
      <div class="activity-price-box">
        <div class="activity-price" v-if="activityDetail.cost == '0.00'">
          免费
        </div>
        <div class="activity-price" v-else>
          ￥{{activityDetail.cost}}元 / <span>人</span>   
        </div>
        <div class="activity-pageviews">
          {{activityDetail.browse_num}} 浏览量
        </div>
      </div>
      <div class="detail-dress detai-list-public">
        <div class="detail-dress-info">
          <i class="detail-dress-icon detail-icon-public"></i>
          <span>{{activityDetail.province + activityDetail.city + activityDetail.area + activityDetail.address_detail}}</span>
        </div>
        <div class="detail-dress-btn" @click="position">
          导航<i class="shell-right icomoon-iconfont-platform-entrance"></i>
        </div>
      </div>
      <div class="detail-time detai-list-public">
        <span class="detail-date-box">
          <i class="detail-icon detail-icon-public"></i>
          <span class="detail-date">{{activityDetail.start_time}} 至 {{activityDetail.end_time}}</span>
        </span>
      </div>
      <div class="seat detai-list-public" v-if="activityDetail.is_set_seat == 1" @click="navigateToSeat(activityDetail.id)">
        <div class="seat-info">
          <i class="seat-icon detail-icon-public"></i>
          <span>查看座位</span>
        </div>
      </div>
    </div>
    <div class="activity-registered">
      <div class="activity-registered-title">
        <div class="activity-registered-left">报名人员</div>
        <div class="activity-registered-right" @click="navigateToSignUpCount(activityDetail.id)">总共<span style="color:#2aa7e1">{{activityDetail.join_num}}</span>/{{activityDetail.max_join_num}}人<i class="shell-right icomoon-iconfont-platform-entrance"></i></div>
      </div>
      <div class="activity-registered-inner">
        <div class="activity-registered-person">
          <scroll-view class="person-scroll-view" scroll-x>
            <div class="scroll-view-list" v-for="(item,index) in eliteList" :key="index">
              <div class="person-image"><img :src="item.photo_url"></div>
              <div class="person-name">{{item.realname}}</div>
            </div>  
          </scroll-view>
        </div>
      </div>
    </div>
    <div class="activity-details-warp" v-if="activityDetail.detail">
      <div class="details-content-title" >活动详情</div>
      <div style="padding-top:16rpx" >
        <wxParse :content="activityDetail.detail"/>
        <div style="height:30rpx"></div>
      </div>
    </div>
    <div class="btn-box">
      <div class="sign" @click="saoma">
        <span>签到</span>
      </div>
      <div class="call-btn" @click="call(phone)">
        <i></i>
        <span>电话</span>
      </div>
      <div class="sign-btn-box">
        <div class="sign-btn1" v-if="differTimeStr=='该活动已经结束'">已结束</div>
        <div class="sign-btn1" v-else-if="differTimeStr=='该活动正在进行中'">报名</div>
        <div v-else>
          <div class="sign-btn" v-if="activityDetail.is_join == 1">你已报名</div>
          <div class="sign-btn" @click="navigateToRegisterForm" v-else>报名</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import wxParse from 'mpvue-wxparse'
import QQMapWX from '../../../utils/qqmap-wx-jssdk.min.js'
import { mapState } from 'vuex'

export default {
  data(){
    return {
      eliteList:[
      ],
      activityID:'',
      activityDetail: '',
      differTimeStr: '',
      imageProp: {
        mode:'aspectFit'
      },
      phone:'',
      loginState: false,
    }
  },
  components:{
    wxParse,
  },
  computed:{
    ...mapState(['userInfo'])
  },
  onLoad(option) {
    this.activityID = option.id;
  },
  onShow(){
    this.reqActivityDetail(this.activityID);
    this.checkLogin();
  },
  //下拉刷新
  onPullDownRefresh () {
    this.reqActivityDetail(this.activityID);
  },
  onShareAppMessage(res){
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: this.activityDetail.name,
      path: 'pages/activityMain/activityDetails/main?id=' + this.activityID // 分享后打开的页面
    }
  },
  methods:{
    checkLogin(){
      let user_token = wx.getStorageSync('userToken');
      let params = {};
      if(user_token){
        this.loginState = true;
      }
    },
    //拨打电话
    call(phone){
      if(!this.loginState){
        this.$currency.showToast('请先登录');
        setTimeout(()=>{
          wx.switchTab({
            url: "/pages/meMain/me/main"
          })
        }, 500)
        return
      }
      wx.makePhoneCall({
        phoneNumber: phone
      })
    },
    //记录浏览量
    async reqActivityBrowseRecord(id){
      var userToken = wx.getStorageSync('userToken');
      let params = { 
        activity_id: id,
        user_token: userToken 
      };
      let res = await this.$api.activityBrowseRecord(params);
      if(res.data.level == "success"){
        
      }else{
        wx.showToast({
          title: res.data.message,
          icon: 'none',
          duration: 1000
        })
      }
    },
    //通过传递过来的参数获取活动数据
    async reqActivityDetail(id){
      var userToken = wx.getStorageSync('userToken');
      let params = { 
        activity_id: id,
        user_token: userToken 
      };
      let res = await this.$api.getActivityDtail(params);
      wx.stopPullDownRefresh()
      if(res.data.level == "success"){
        this.activityDetail = res.data.data
        this.eliteList=res.data.data.join_user_list;
        this.phone = this.activityDetail.re_person_phone;
        this.reqActivityBrowseRecord(id);
        this.overTime();
      }else{
        wx.showToast({
          title: '获取内容失败',
          icon: 'none',
          duration: 1000
        })
      }
    },
    //计算活动距离开始还有多长时间
    overTime(){
      let startTime = new Date(this.activityDetail.start_time.replace(/-/g, '/')).getTime();
      let endTime = new Date(this.activityDetail.end_time.replace(/-/g, '/')).getTime();
      let nowTime = new Date().getTime();
      let differTime = startTime - nowTime;
      let differENDTime = endTime - nowTime;
      let day = Math.floor(differTime / 1000 / 3600 / 24);  // 计算天数
      let hours = Math.floor((differTime % (1000 * 3600 * 24)) / 1000 / 3600); // 计算小时数
      let minutes = Math.floor(differTime % (1000 * 3600) / 1000 / 60 ); // 计算距离开始分钟数
      if(minutes <= 0 && differENDTime > 0){
        this.differTimeStr = '该活动正在进行中';
      }else if(differENDTime <= 0 ){
        this.differTimeStr = '该活动已经结束';
      }else{
        this.differTimeStr = day +'天'+ hours +'小时'+ minutes +'分钟开始';
      }
    },
    //利用腾讯地图sdk中文定位
    position(){
      //实例化
      var position_map = new QQMapWX({
        key: 'DTYBZ-MNUCV-HQOP3-UD5FF-BLBQT-ATFI2' //开发者key
      })
      //合并地址
      let address = this.activityDetail.province + this.activityDetail.city + this.activityDetail.area + this.activityDetail.address_detail;
      position_map.geocoder({
        address,
        success: function (res) {
          let latitude = res.result.location.lat;
          let longitude = res.result.location.lng;
          wx.openLocation({
            latitude,
            longitude,
            scale: 18,
            name: address,
          })
        },
        fail: function (res) {
          console.log(res);
        },
      })
    },
    //跳转到报名表格页面
    navigateToRegisterForm(){
      if(!this.loginState){
        this.$currency.showToast('请先登录');
        setTimeout(()=>{
          wx.switchTab({
            url: "/pages/meMain/me/main"
          })
        }, 500)
        return
      }
      if(this.activityDetail.is_allow_not_vip_join == 0 && this.userInfo.user_vip.is_vip == 0){
        this.$currency.showToast('该活动只允许会员参加');
        return
      }
      wx.navigateTo({
        url: '/pages/activityMain/registerForm/main?id='+ this.activityID +'&cost=' + this.activityDetail.cost + '&guest_cost=' + this.activityDetail.guest_cost+ '&is_guest=' + this.activityDetail.is_guest
      })
    },
    //跳转到查看座位页面
    navigateToSeat(id){
      if(!this.loginState){
        this.$currency.showToast('请先登录');
        setTimeout(()=>{
          wx.switchTab({
            url: "/pages/meMain/me/main"
          })
        }, 500)
        return
      }
      if(this.activityDetail.seat_num == ""){
        wx.showToast({
          title: '还没安排您的座位',
          icon: 'none',
          duration: 1000
        })
      }else{
        wx.navigateTo({
          url: '/pages/activityMain/seat/main?id=' + id
        })
      }
    },
    //跳转到报名人员列表
    navigateToSignUpCount(id){
      wx.navigateTo({
        url: '/pages/activityMain/signUpCount/main?id=' + id
      })
    },
    saoma(){
      if(this.activityDetail.is_join == 1){
        // 允许从相机和相册扫码
        wx.scanCode({
          success (res) {
            wx.navigateTo({
              url:"/" + res.path
            })
          }
        })
      }else{
        wx.showToast({
          title: '请您先报名',
          icon: 'none',
          duration: 1000
        })
      }
    },
  }
}
</script>

<style lang="scss" scoped>
  .activity-details{
    overflow-x: hidden;
    min-height: 100vh;
    background-color: #f1f1f1;
    padding-bottom: 100rpx;
    .activity-details-top{
      background-color: #fff;
      padding-bottom: 14rpx;
      .activity-details-top-content{
        position: relative;
        .activity-img{
          width: 100%;
          height: 400rpx;
        }
        .activity-name{
          position: absolute;
          left: 40rpx;
          bottom: 20rpx;
          width: 500rpx;
          font-size: 36rpx;
          height: 50rpx;
          line-height: 50rpx;
          font-weight: 600;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          color: #fff;
        }
      }
      .activity-price-box{
        margin-top:12rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:0 40rpx;
        .activity-price{
          color: #cc4458;
          font-weight: 600;
          font-size: 32rpx;
          height: 54rpx;
          line-height: 54rpx;
          span{
            font-size: 22rpx;
            color: #bbb8b8;
          }
        }
        .activity-pageviews{
          font-size: 22rpx;
          color: #919191;
          position: relative;
        }
      }
      .detai-list-public{
        padding:0 40rpx;
        height: 64rpx;
        line-height: 64rpx;
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #333333;
        .detail-icon-public{
          width: 32rpx;
          height: 32rpx;
          background-repeat: no-repeat;
          background-size: 32rpx 32rpx;
          background-position: center center;
          margin-right: 22rpx;
        }
      }
      .detail-dress{
        justify-content: space-between;
        .detail-dress-info{
          display: flex;
          align-items: center;
          .detail-dress-icon{
            background-image: url(../../../../static/images/position.png);
          }
        }
        .detail-dress-btn{
          display: flex;
          justify-items: center;
          align-items: center;
          color: #cc4458;
          .shell-right{
            transform:rotate(-90deg);
          }
        }
      }
      .detail-time{
        .detail-date-box{
          display: flex;
          justify-content: center;
          align-items: center;
          .detail-icon{
            background-image: url(../../../../static/images/time.png);
          }
        }
      }
      .seat{
        justify-content: space-between;
        .seat-info{
          display: flex;
          align-items: center;
          .seat-icon{
            background-image: url(../../../../static/images/seat.png);
          }
        }
        // .shell-right{
        //   transform:rotate(-90deg);
        // }
      }
      .detail-start{
        .detail-icon{
          background-image: url(../../../../static/images/time.png);
        }
      }
    }
    .activity-registered{
      background-color: #fff;
      padding: 0 40rpx;
      margin-top: 14rpx;
      .activity-registered-title{
        display: flex;
        justify-content: space-between;
        height: 70rpx;
        line-height: 76rpx;
        text-align: center;
        border-bottom: 1px solid #ccc;
        .activity-registered-left{
          font-size: 30rpx;
          font-weight: bold;
          color: #242424;
        }
        .activity-registered-right{
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 26rpx;
          color: #797676;
          .shell-right{
            transform:rotate(-90deg);
          }
        }
      }
      .activity-registered-inner{
        margin-top: 20rpx;
        padding-bottom: 20rpx;
        .activity-registered-person{
          .person-scroll-view{
            overflow:hidden;
            white-space:nowrap;
            .scroll-view-list{
              display: inline-block;
              width: 140rpx;
              margin-right: 36rpx;
              .person-image{
                width: 100%;
                height: 140rpx;
                border-radius: 50%;
                img{
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                }
              }
              .person-name{
                color: #666666;
                font-size: 26rpx;
                height: 40rpx;
                line-height: 40rpx;
                text-align: center;
              }
            }
          }
        }
      }
    }
    .activity-details-warp{
      margin-top: 14rpx;
      background-color: #fff;
      padding: 0 40rpx;
      .details-content-title{
        display: flex;
        justify-content: space-between;
        height: 70rpx;
        line-height: 76rpx;
        text-align: center;
        border-bottom: 1px solid #ccc;
        font-size: 30rpx;
        font-weight: bold;
        color: #242424;
      }
      .details-content-content{
        padding: 40rpx;
        font-size: 28rpx;
        line-height: 28rpx;
      }
    }
    .btn-box{
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .sign-btn-box{
        flex: 2;
        .sign-btn{
          width: 100%;
          line-height: 80rpx;
          background: -webkit-linear-gradient(left, #2aa7e1, #66aae9);
          color: #fff;
          text-align: center;
          font-size: 28rpx;
          border-radius: 0;
        }
        .sign-btn1{
          width: 100%;
          line-height: 80rpx;
          color: #fff;
          text-align: center;
          font-size: 28rpx;
          border-radius: 0;
          background-color: #aaa;
        }
      }
      // .share-btn{
      //   flex: 1;
      //   height: 80rpx;
      //   display: flex;
      //   flex-direction: column;
      //   justify-content: center;
      //   align-items: center;
      //   background-color:#fff;
      //   color: #000;
      //   text-align: center;
      //   font-size: 24rpx;
      //   padding: 10rpx 0 0 0;
      //   line-height: normal;
      //   border-radius: 0;
      //   i{
      //     width: 45rpx;
      //     height: 44rpx;
      //     background-image: url(../../../../static/images/share2.png);
      //     background-repeat: no-repeat;
      //     background-size: 100%;
      //     background-position: center center;
      //   }
      // }
      // .share-btn::after{
      //   border: none;
      // }
      .call-btn{
        flex: 1;
        height: 80rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color:#fff;
        color: #000;
        text-align: center;
        font-size: 24rpx;
        i{
          width: 49rpx;
          height: 48rpx;
          background-image: url(../../../../static/images/dianhua3.png);
          background-repeat: no-repeat;
          background-size: 100%;
          background-position: center center;
        }
        span{
        }
      }
      .sign{
        flex: 1;
        height: 80rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color:#fff;
        color: #000;
        text-align: center;
        font-size: 26rpx;
      }
    }
    
  }
</style>